<template>
	<view>
		<view class="go-home" @click="backHome">
			<image :src="imglink + 'home/home-Selected.png'" mode=""></image>
		</view>
		<view>
			<view class="form-num">
				<view class="form-num-title">{{ title }}</view>
				<view class="form-num-content">
					<view class="">{{ total }}份</view>
					<view class="">收表单数量</view>
				</view>
				<view v-if="show_excel_btn" class="derived-form"  @click="getExcel" :data-clipboard-text="copyText">
					复制链接，下载excel表
				</view>
			</view>
			<view class="">
				<view class="collect-form-details">
					<view class="">
						收集表单明细
					</view>
				</view>
				<view 
					class="staff_msg_content"  
					v-if="infos.length>0" 
					v-for="(info, index) in infos" 
					:key='index'
				>
					<view class="staff_msg_top">
						<view class="">
							<image :src="info.customer_avatar" mode=""></image>
							<text>{{info.customer_nickname}}</text>
						</view>
						<view class="">
							{{info.date_added}}
						</view>
					</view>
					<view class="patriarch-child-msg">
						<view class="" 
							v-for="field in info.fields " 
							:key='index'>
							{{field.field_name}}：
							<text>{{field.field_value}}</text>
						</view>
						<!-- <view class="">
							孩子信息：<text>5岁/女</text>
						</view> -->
					</view>
					<view class="salesman-msg">
						<view class="">
							<image :src="info.share_customer_avatar" mode="widthFix"></image>
							<text>{{info.share_customer_name?info.share_customer_name:'-'}}</text>
							<view class="">
								{{info.share_customer_name?'业务员':'店主'}}
							</view>
						</view>
						<view class="">
							负责该课程活动相关业务
						</view>
					</view>
				</view>
				<view v-else style="maring:30rpx auto;font-size:28rpx;color:#ccc;text-align: center;">
					<text>暂无员工参与</text>
				</view>
			</view>
		</view>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share">
				<image class="popup_box_close_share" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef H5
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Clipboard from 'clipboard'
	export default{
		components:{uniPopup},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				height:0,
				store_id:0,
				collect_info_id:0,
				title: '',
				total:0,
				collect_info:[],
				infos:[],
				page:1,
				pagesize:8,
				lastPage:0,
				copyText:'',
				store_info:null,
				customer_info:[],
				role:"",
				show_excel_btn:false
				
			}
		},
		
		onLoad(options) {
			
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			
			let store_id = parseInt(options.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			
			// this.copyText = this.$store.state.URL + '/order/order/get_excel?token=' + this.$store.getters.getToken + '&activity_id=' + this.store_collect_info_id
			// this.get_activity_down_select()
			// console.log("订单详情......获取线下表单活动数据", this.store_collect_info_id)
			this.collect_info_id = parseInt(options.collect_info_id,10);
			
			this.copyText = this.$store.state.URL + '/order/order/collection_excel?token=' + this.$store.getters.getToken + '&store_id=' + this.store_id + '&collect_info_id=' + this.collect_info_id
			// this.getCustomer()
		},
		onShow(){
			console.log('',);
			this.getActivityDownCollectInfos();
		},
		methods:{
			
			//获取表单收集已收集到的信息
			getActivityDownCollectInfos(){
				
				const that = this;
				let data = {
					token: this.$store.getters.getToken,
					page: this.page,
					pagesize: this.pagesize,
					store_id:this.$store.getters.getStoreId,
					collect_info_id:this.collect_info_id
				}
				this.$api.get_activity_down_collect_infos(data).then(res => {
					
					// console.log(res,'get_activity_down_collect_infos')
					
					if(res.status){
						const data = res.data
						that.collect_info= data
						that.title = data.title;
						that.infos = data.infos;
						that.total = data.total;
						that.lastPage = data.total_page;
						console.log(data,'get_activity_down_collect_infos')
						this.getCustomer()
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			// #ifdef H5
				getExcel(){
					const clipboard = new Clipboard('.derived-form')
					clipboard.on('success', (e) => {
						uni.showToast({
							title:'下载链接已复制，请前往浏览器下载！',
							icon:'none',
							duration:2000
						})
					  clipboard.destroy()
					})
					clipboard.on('error', () => {
					  clipboard.destroy()
					})
				},
			// #endif
			//复制
			// #ifdef MP-WEIXIN
				getExcel(){
					uni.setClipboardData({
						data: this.copyText,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
								}
							})
						}
					})
				},
			// #endif
			//返回首页
			backHome(){
				uni.navigateTo({
					url:'/pages/home/home?store_id=' + this.store_id
				})
			},
			getCustomer(){
				const data = {
					token: this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					console.log(res,'角色')
					if(res.status){
						this.customer_info = res.data.userinfo
						this.role = res.data.role
					}
					let data = {
						token:this.$store.getters.getToken,
						customer_store_id:this.store_id
					}
					this.$api.gain_shop_msg(data).then(res=>{
						if(res.status){
							this.store_info=res.data
						}
						this.show_excel_btn_fun()
						console.log("show_excel_btn",this.show_excel_btn)
					})
				}).catch(err => {
					console.log(err)
				})
			},
			show_excel_btn_fun(){
				if(this.store_info.customer_store_id==this.store_id&&this.customer_info.customer_id==this.store_info.customer_id){//店主
					this.show_excel_btn= true
				}else if(this.customer_info.customer_id==this.collect_info.customer_id){//创建者
					this.show_excel_btn= true
				}else{
					this.show_excel_btn= false
				}
			},
			//获取活动店铺数据  get_customer_employee_get_select
			get_customer_employee_get_select(){
				console.log("get_customer_employee_get_select.....")
				let data = {
					token: this.$store.getters.getToken,
					page: this.page,
					pagesize: this.pagesize,
					store_id:this.$store.getters.getStoreId,
					activity_id:this.activity_id
				}
				this.$api.get_customer_employee_get_select(data).then(res => {
					
					console.log(res)
					if(res.status){
						this.permission_list = res.list
						this.lastPage = res.data.last_page
						console.log(this.permission_list,'111111111111 ')
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
		},
	}
</script>

<style>
	.go-home{
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		position: fixed;
		border: 1upx solid #DEDEDE;
		bottom: 50upx;right: 50upx;
		z-index: 999;
	}
	.go-home>image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.popup_box_de_share{
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	page{
		background: #F3F3F4;
	}
	.form-gather,.form-num{
		width: 100%;
		padding: 0 30upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.form-gather>view:first-child,.form-num-title{
		padding: 30upx 0;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		color: #333333;
		font-size: 34upx;
	}
	.form-gather>view:last-child,.derived-form{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 36upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.act-participant{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.act-participant-title{
		color: #333333;
		font-size: 30upx;
	}
	.act-participant-msg{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		padding: 0 36upx 0 20upx;
		box-sizing: border-box;
		background: #F4F5F9;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.act-participant-msg>view{
		color: #999999;
		font-size: 28upx;
	}
	.act-participant-content{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.act-participant-content:last-child{
		border-bottom: none;
	}
	.act-participant-basics{
		display: flex;
		flex-grow: 1;
	}
	.act-participant-basics>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.act-participant-basics>text{
		display: inline-block;
		margin-left: 20upx;
		line-height: 80upx;
		color: #333333;
		font-size: 28upx;
	}
	.act-participant-details{
		display: flex;
		flex-grow: 2;
		justify-content: space-between;
	}
	.act-participant-details>text{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.act-participant-operation{
		width: 128upx;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		border: 1upx solid #666666;
		border-radius: 4upx;
		color: #666666;
		font-size: 24upx;
		margin-top: 18upx;
	}
	.cancel-operation{
		color: #FF8B46;
		border-color: #FF8B46;
	}
	.form-num-content{
		text-align: center;
		margin-top: 28upx;
	}
	.form-num-content>view:first-child{
		color: #333333;
		font-size: 48upx;
	}
	.form-num-content>view:last-child{
		color: #999999;
		font-size: 22upx;
		margin-top: 6upx;
	}
	.collect-form-details{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.collect-form-details>view{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		color: #333333;
		font-size: 30upx;
	}
	.staff_msg_content{
		width: 100%;
		padding: 20upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.staff_msg_top{
		display: flex;
		justify-content: space-between;
	}
	.staff_msg_top>view:first-child{
		display: flex;
	}
	.staff_msg_top>view>image,.salesman-msg>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.staff_msg_top>view>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.staff_msg_top>view:last-child{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.staff_msg_phone{
		display: flex;
		justify-content: space-between;
	}
	.staff_msg_phone>view:first-child{
		color: #666666;
		font-size: 28upx;
		margin-left: 100upx;
		line-height: 50upx;
	}
	.staff_msg_phone>view:last-child{
		width: 130upx;
		height: 50upx;
		line-height: 50upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 4upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.patriarch-child-msg{
		width: 100%;
		/* height: 100upx; */
		/* line-height: 100upx; */
		background: #F4F5F9;
		margin-top: 30upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30upx 56upx 10upx 44upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.patriarch-child-msg>view{
		width: 50%;
		color: #666666;
		margin-bottom: 20upx;
	}
	.patriarch-child-msg>view>text{
		color: #333333;
		font-weight: 800;
	}
	.salesman-msg{
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;
	}
	.salesman-msg>view:last-child{
		color: #000000;
		font-size: 24upx;
		line-height: 80upx;
	}
	.salesman-msg>view:first-child{
		display: flex;
	}
	.salesman-msg>view>text{
		color: #333333;
		font-size: 28upx;
		display: inline-block;
		line-height: 80upx;
		margin-left: 20upx;
	}
	.salesman-msg>view>view{
		width: 80upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		border: 1upx solid #FF8B46;
		color: #FF8B46;
		font-size: 22upx;
		margin-top: 28upx;
		margin-left: 14upx;
	}
	
	.act-participant-basics .name{
		width: 100upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
